<template>
  <div class="content">
    <form class="form">
      <p class="form-title">Sign in to your account{{ now }}</p>
      <div class="input-container">
        <input v-model="userinfo.username" placeholder="Enter email" type="text" />
        <span> </span>
      </div>
      <div class="input-container">
        <input v-model="userinfo.password" placeholder="Enter password" type="password" />

        <span>
          <svg
            stroke="currentColor"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
              stroke-width="2"
              stroke-linejoin="round"
              stroke-linecap="round"
            ></path>
            <path
              d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
              stroke-width="2"
              stroke-linejoin="round"
              stroke-linecap="round"
            ></path>
          </svg>
        </span>
      </div>
      <!--  -->

      <el-button class="loginbtn" type="primary" :loading="status" @click="login">
        Sign in</el-button
      >

      <p class="signup-link">No account? Sign up</p>
    </form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { login as tologin } from '../api/login.js'
import { useRouter } from 'vue-router'
import { useLoading } from '../hook/useLoading'
// import { ElMessage } from 'element-plus'
// import 'element-plus/lib/components/message/style/css.js'
// import '../../node_modules/element-plus/theme-chalk/el-message.css'
const router = useRouter()
const userinfo = reactive({
  username: import.meta.env.DEV ? 'admin' : '',
  password: import.meta.env.DEV ? '111111' : ''
})

let [status, fn] = await useLoading(tologin, userinfo)

console.log(status, fn)

const now = ref(import.meta.env.VITE_APP_NOW)
console.log(import.meta.env)
async function login() {
  let result = await fn()
  if (result.code == 20000) {
    window.$Message({
      message: '登录成功.',
      type: 'success'
    })
    localStorage.setItem('token', result.data.token)
    router.replace('/')
  }
}
</script>

<style lang="scss" scoped>
.loginbtn {
  width: 100%;
  background-color: var(--Whilt);
  &:hover {
    background: var(--GrayGradient);
  }
}
.fonst {
  /* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
  font-family: '阿里妈妈刀隶体 Regular';
}
.content {
  width: 100vw;
  height: 100vh;
  // background-color: var(--DarkGary2);
  background-image: var(--GrayGradient);
  display: flex;
  justify-content: center;
  align-items: center;
}

.form {
  background-color: #fff;
  display: block;
  padding: 1rem;
  max-width: 350px;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.form-title {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  text-align: center;
  color: #000;
}

.input-container {
  position: relative;
}

.input-container input,
.form button {
  outline: none;
  border: 1px solid #e5e7eb;
  margin: 8px 0;
}

.input-container input {
  background-color: #fff;
  padding: 1rem;
  padding-right: 3rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  width: 300px;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.input-container span {
  display: grid;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  padding-left: 1rem;
  padding-right: 1rem;
  place-content: center;
}

.input-container span svg {
  color: #9ca3af;
  width: 1rem;
  height: 1rem;
}

.submit {
  display: block;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  background-color: #4f46e5;
  color: #ffffff;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  width: 100%;
  border-radius: 0.5rem;
  text-transform: uppercase;
}

.signup-link {
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: center;
}

.signup-link a {
  text-decoration: underline;
}
.form-title {
  user-select: none;
}
</style>
